// 创建XMLHttpRequest对象（兼容不同浏览器）
function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    throw new Error("您的浏览器不支持XMLHttpRequest");
}

// 获取所有用户信息的函数
function getUsers() {
    const xhr = createXHR();
    console.log('准备发起获取用户数据的请求，请求URL：', 'http://localhost:3000/users');
    xhr.open('GET', 'http://localhost:3000/users', true);
    xhr.onreadystatechange = function () {
        console.log('请求状态改变，当前 readyState：', xhr.readyState);
        if (xhr.readyState === 4 && xhr.status === 200) {
            let data;
            try {
                data = JSON.parse(xhr.responseText);
                console.log('成功解析用户数据，数据内容：', data);
            } catch (error) {
                console.error('解析用户数据出错：', error);
                document.getElementById('userList').innerHTML = '解析用户数据出错，请稍后再试';
                return;
            }
            displayUsers(data);
        } else if (xhr.readyState === 4 && xhr.status!== 200) {
            console.error('获取用户数据失败，状态码：', xhr.status);
            document.getElementById('userList').innerHTML = '获取用户数据失败，请稍后再试';
        }
    };
    xhr.send();
}

// 展示用户信息的函数
function displayUsers(users) {
    const userListDiv = document.getElementById('userList');
    userListDiv.innerHTML = '';
    if (users.length === 0) {
        userListDiv.innerHTML = '暂无用户数据';
    } else {
        const ul = document.createElement('ul');
        users.forEach(user => {
            const li = document.createElement('li');
            li.innerHTML = `<span>ID: ${user.id}</span><span>姓名: ${user.name}</span><span>年龄: ${user.age}</span>`;
            ul.appendChild(li);
        });
        userListDiv.appendChild(ul);
    }
}

// 添加用户功能
document.getElementById('addUserForm').addEventListener('submit', function (e) {
    e.preventDefault();
    const name = document.getElementById('name').value;
    const age = document.getElementById('age').value;
    const xhr = createXHR();
    xhr.open('POST', 'http://localhost:3000/users', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log('用户添加成功');
            getUsers(); // 添加成功后刷新用户列表
        } else if (xhr.readyState === 4 && xhr.status!== 200) {
            console.error('添加用户失败，状态码：', xhr.status);
        }
    };
    const data = JSON.stringify({ name: name, age: age });
    xhr.send(data);
});

// 更新用户功能
document.getElementById('updateUserForm').style.display = 'none'; // 初始隐藏更新表单
document.getElementById('userList').addEventListener('click', function (e) {
    if (e.target.tagName === 'LI') {
        const userInfo = e.target.textContent.split(', ');
        const id = userInfo[0].split(': ')[1];
        document.getElementById('updateId').value = id;
        document.getElementById('updateUserForm').style.display = 'block';
    }
});
document.getElementById('updateUserForm').addEventListener('submit', function (e) {
    e.preventDefault();
    const id = document.getElementById('updateId').value;
    const name = document.getElementById('updateName').value;
    const age = document.getElementById('updateAge').value;
    const xhr = createXHR();
    xhr.open('PUT', 'http://localhost:3000/users', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log('用户更新成功');
            getUsers(); // 更新成功后刷新用户列表
        } else if (xhr.readyState === 4 && xhr.status!== 200) {
            console.error('更新用户失败，状态码：', xhr.status);
        }
    };
    const data = JSON.stringify({ id: id, name: name, age: age });
    xhr.send(data);
});

// 删除用户功能
function deleteUser() {
    const id = document.getElementById('deleteId').value;
    const xhr = createXHR();
    xhr.open('DELETE', 'http://localhost:3000/users/' + id, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log('用户删除成功');
            getUsers(); // 删除成功后刷新用户列表
        } else if (xhr.readyState === 4 && xhr.status!== 200) {
            console.error('删除用户失败，状态码：', xhr.status);
        }
    };
    xhr.send();
}
